<template>
  <el-drawer v-model="drawerDisplay" title="文章列表" size="70%">
    <el-form :model="queryForm" label-width="80px">
      <el-row :gutter="20">
      </el-row>
      <el-row :gutter="20">
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="搜索">
            <el-input v-model="queryForm.keyword" @keyup.enter="onSearch" clearable placeholder="请输入标题或内容"/>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="语言类型">
            <el-select
                v-model="queryForm.type"
                value-key="id"
                clearable
                @clear="onType"
                placeholder="请选择语言类型"
            >
              <el-option
                  v-for="item in typeList"
                  :key="item.name"
                  :label="item.message"
                  :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label-width="0">
            <el-button type="primary" @click="onSearch">
              <el-icon>
                <ele-search/>
              </el-icon>
              <span class="search-btn__left">查询</span>
            </el-button>
            <el-button @click="onReset">
              <el-icon>
                <ele-refresh/>
              </el-icon>
              <span class="search-btn__left">重置</span>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="tableData.loading" :data="tableData.data" border row-key="id">
      <el-table-column prop="_tableIndex" label="序号" align="center" width="50px"/>
      <el-table-column prop="id" label="ID" align="center" show-overflow-tooltip/>
      <el-table-column prop="title" label="文章标题" align="center" show-overflow-tooltip/>
      <el-table-column label="文章内容" align="center">
        <template #default="scope">
          <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.content"
              placement="top"
              :raw-content="true"
          >
            <template #content>
              <div v-html="scope.row.content"
                   :style="{ 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap' ,'width': '400px'}"></div>
            </template>
            <div v-html="scope.row.content" style="height: 50px"></div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column property="imgUrl" align="center" label="图片">
        <template #default="scope">
          <el-image default="scope"
                    style="width: 50px; height: 50px"
                    :src="scope.row.images"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[scope.row.images]"
                    :initial-index="1"
                    :hide-on-click-modal="true"
                    :preview-teleported="true"
                    fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="type" label="语言类型" align="center">
        <template #default="scope">
          <div>
            <el-tag v-text="scope.row.type.message"></el-tag>
          </div>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="categoryId" label="文章分类" align="center" show-overflow-tooltip/>-->
      <el-table-column prop="browseCount" label="浏览量" align="center" show-overflow-tooltip/>
      <el-table-column prop="exhibitStatus.message" label="展示状态" align="center" show-overflow-tooltip>
        <template #default="scope">
          <div>
            <el-tag v-text="scope.row.exhibitStatus.message"></el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" min-width="100" sortable="custom"/>
      <el-table-column label="操作" fixed="right" align="center" min-width="116">
        <template #default="scope">
          <el-button v-auth="'article:delete'" link type="primary" @click="delTable(scope.row.id)">
            <el-icon>
              <ele-delete/>
            </el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <CustomPagination v-model:currentPage="pagination.pageIndex" v-model:pageSize="pagination.pageSize"
                      :total="pagination.total" @changePage="changePage"/>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { deleteArticleRel, getArticlePage } from "@/api/app/article"
import { calcTableIndex } from "@/utils/util"
import { ElMessageBox, ElMessage } from 'element-plus'

const props = defineProps({
  type: {
    type: String,
    default: () => '',
  },
});

const drawerDisplay = ref(false)

const queryForm = reactive({
  keyword: null,
  releaseStatus: null
})
const typeList = ref([
  {'name': 'RAW', 'message': '原文'},
  {'name': 'ZH', 'message': '中文'},
  {'name': 'EN', 'message': '英文'}
])

const tableData = reactive({
  data: [],
  loading: false
})
const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0
})
const model = reactive({
  id: ''
})

const show = (id: string) => {
  model.id = id
  drawerDisplay.value = true
  getTableList()
}

const getTableList = () => {
  tableData.loading = true;
  let params = {
    ...pagination,
    ...queryForm,
    relId: model.id,
    relTable: props.type
  }
  getArticlePage(params).then(res => {
    tableData.data = calcTableIndex(res, pagination);
    pagination.total = res.total;
    tableData.loading = false;
  })
}

// 翻页
const changePage = (page: number) => {
  pagination.pageIndex = page;
  getTableList();
}

const onSearch = () => {
  pagination.pageIndex = 1;
  getTableList();
}

// 重置
const onReset = () => {
  queryForm.keyword = null
  queryForm.releaseStatus = null
  pagination.pageIndex = 1;
  getTableList();
}

// 删除
const delTable = (id: string) => {
  ElMessageBox.confirm('是否确认删除本条数据？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    let params = {
      id,
      relId: model.id,
      relTable: props.type
    }
    deleteArticleRel(params).then(() => {
      ElMessage.success('删除成功');
      getTableList();
    })
  }).catch(() => {})
}

defineExpose({
  show
})
</script>
<style lang="scss" scoped>
  
</style>